This PR adds support for custom SVG markers. SVG is read from a user-chosen property (just like custom icon names), parsed, and rendered onto the map. This allows users to use custom marker shapes beyond the Lucide icon composite markers. It also enables data-driven markers, for example, for displaying values such as ratings/prices or varying the size of a marker via formulas.

The SVG property or formula is expected to evaluate to a valid SVG element wrapped in <svg></svg>. SVGs with explicit dimensions (width/height property on the <svg> element) render at a fixed size, SVGs with only viewBox scale with zoom just as normal markers. Invalid SVGs show a fallback marker with error details in the popup.

Marker property precedence is: Custom SVG marker --> Custom Icon marker --> Default marker. This makes it possible to use SVG markers only for specific entries, falling back to icon or default markers for others.

Main changes

• markers.ts: Add SVG parsing (using DOMParser), validation, and rendering
• popup.ts: Display SVG validation errors
• exapmles/: Added demo views showing static, dynamic text, and dynamic size SVG markers via formulas and a per-entry SVG marker via a plain frontmatter property.

Limitations

• No CSS variable support in custom SVGs
• No interactivity (script tags, event handlers, animations etc.)
• Dimensions required (svg element must have eitherviewBox or explicit width/height attributes)
• String literals in formulas don't support line breaks, which makes typing or pasting SVG code inside the formula a bit awkward (should be fine if documented).

Examples

Simple markers using a formula

Dynamic text markers displaying the rating property

Dynamic size markers

Per-Item marker using a simple frontmatter property

(Public domain Eiffel tower SVG from Wikimedia Commons)

If you consider merging this, I'll be happy to make any changes needed or add documentation for the feature in the Map View docs.